<template>
  <div class="article">
    <IndexHeader />
    <div class="container-m">
      <div class="news_title">
        <h1>{{ newsDetail.title }}</h1>
        <div class="news_info">
          <span>{{ newsDetail.author }}</span>
          <span>{{
            newsDetail.release_timestamp | dateFtt('yyyy-MM-dd hh:mm:ss')
          }}</span>
        </div>
      </div>
      <div class="news-content">
        <div v-for="(item, index) in newsDetail.images" :key="'img-' + index">
          <p>
            <img v-lazy="item.image_url" alt="" />
          </p>
          <p class="img_desc">{{ item.image_desc }}</p>
        </div>
      </div>

      <Gather></Gather>
    </div>

    <div class="Recommend">
      <div class="Recommend-title">
        <h2>{{ $t('Best_recommend') }}</h2>
        <!-- banner -->
        <Banner
          v-if="JSON.stringify(banner) != '{}' && banner != null"
          :banner="banner"
        />
      </div>
      <!-- 列表 -->
      <Recommend :relatedList="relatedList" />
    </div>
  </div>
</template>

<script>
import IndexHeader from '@/components/m/Header.vue';
import Banner from '@/components/m/Banner.vue';
import Recommend from '@/components/m/Recommend.vue';
import Gather from '@/components/m/Gather.vue';
import { LRUcache } from '@/utils/lru_cache.js';

export default {
  components: {
    IndexHeader,
    Banner,
    Recommend,
    Gather
  },

  data() {
    return {
      newsDetail: {},
      showBanner: false, //是否显示金币提示
      banner: {}, //banner内容
      relatedList: [] //精彩推荐
    };
  },

  head() {
    const gallery = this.newsDetail;
    return this.$getGallerySeoHead(gallery);
  },

  async asyncData(ctx) {
    try {
      /* 404处理 */
      function toError() {
        ctx.error({
          statusCode: 404,
          message: 'Post not found'
        });
        return;
      }
      /* 有缓存，取缓存，无缓存，请求接口 */
      const id = ctx.params.id.replace(/\.html$/, '');
      let bannerObjData = LRUcache.get(
          `/${ctx.store.state.locale}/article/get_banner_channel?imageType=1`
        ),
        resultObjData = LRUcache.get(
          `/${ctx.store.state.locale}/article/get_news_detail?news_id=${id}&news_type=2`
        ),
        relatedObjData = LRUcache.get(
          `/${ctx.store.state.locale}/get_related_list/2/${id}`
        );
      let banner, resultObj, related;
      if (bannerObjData && bannerObjData.result) {
        banner = bannerObjData;
      } else {
        banner = await ctx.$axios.$get(
          `/article/get_banner_channel?imageType=1`
        );
        !banner.result && toError();
        LRUcache.set(
          `/${ctx.store.state.locale}/article/get_banner_channel?imageType=1`,
          banner
        );
      }
      if (resultObjData && resultObjData.result) {
        resultObj = resultObjData;
      } else {
        resultObj = await ctx.$axios.$get(
          `/article/get_news_detail?news_id=${id}&news_type=2`
        );
        !resultObj.result && toError();
        LRUcache.set(
          `/${ctx.store.state.locale}/article/get_news_detail?news_id=${id}&news_type=2`,
          resultObj
        );
      }
      if (relatedObjData && relatedObjData.result) {
        related = relatedObjData;
      } else {
        related = await ctx.$axios.$get(
          `/article/get_related_list?news_id=${id}&news_type=2`
        );
        !related.result && toError();
        LRUcache.set(
          `/${ctx.store.state.locale}/get_related_list/2/${id}`,
          related
        );
      }

      return {
        newsDetail: resultObj.result,
        showBanner: banner.result.isOpenCoin,
        banner: banner.result.banner_list,
        relatedList: related.result
      };
    } catch (err) {
      ctx.error({ statusCode: 404, message: '网络异常，请重试！' });
    }
  }
};
</script>

<style lang="scss" scoped>
.article {
  .news-content {
    img {
      border-radius: 8px;
    }
  }
}

img[lazy='loading'] {
  width: 100%;
  height: auto;
  object-fit: cover;
}
</style>
